Step 5: Replacing hard-coded field contents with code
To replace the hard-coded field contents with code that dynamically retrieves the fields' contents from the Component being rendered, replace the contents with code.
Procedure
- In Content Manager Explorer, navigate to the Folder Building Blocks\System\Templates\Template Building Blocks\Design\ and open the Template Building Block called "Article Summary Design" in this location.
- In the dialog that opens, select the Source tab.
- Replace the contents of the Source tab with the following:
<article class="wrap wide" xmlns:tridion="http://www.tridion.com/ContentManager/5.0"> @@FieldStartMarker("Component.Fields.image")@@ @@FieldValueStartMarker(0)@@ <img src="${Component.Fields.image}" tridion:type="Multimedia" alt="image" /> @@FieldValueEndMarker()@@ @@FieldEndMarker()@@ <h2 class="title"> @@FieldStartMarker("Component.Fields.title")@@ @@FieldValueStartMarker(0)@@ @@GetFieldValue("title", 0)@@ @@FieldValueEndMarker()@@ @@FieldEndMarker()@@ </h2> <p class="info">Posted by @@FieldStartMarker("Component.Fields.author")@@ @@FieldValueStartMarker(0)@@ @@GetFieldValue("author", 0)@@ @@FieldValueEndMarker()@@ @@FieldEndMarker()@@ - @@FieldStartMarker("Component.Fields.date")@@ @@FieldValueStartMarker(0)@@ @@GetFieldValue("date", 0)@@ @@FieldValueEndMarker()@@ @@FieldEndMarker()@@</p> <p> @@FieldStartMarker("Component.fields.summary")@@ @@FieldValueStartMarker(0)@@ @@GetFieldValue("summary", 0)@@ @@FieldValueEndMarker()@@ @@FieldEndMarker()@@ </p> <p class="more"><a tridion:href="@@Component.ID@@" tridion:textonfail="false">Read more »</a></p> </article>This code renders each of the fields of the Component it is rendering except for Body. This is because this Template Building Block is intended to render a summary only of the article.
- Save and close your Template Building Block.